<template>
	<view>
		<!--header-->
		<view class="main-app modal-body">
			<view class="main-content en p-4">
				<view class="main-app modal-body">
					<view class="main-content en p-4 pt-0">
						<view class="team-card share-friend-card">
							<view class="card-referral card"><label
									class="highlight-title">{{$t('Share-friends')}}</label>
								<view class="qr-code-container">
									<view class="qr-box">
										<u--image :showLoading="true" :src="shareData['qr_code']" width="316rpx"
											height="316rpx"></u--image>
									</view>
								</view><label class="mt-3 mb-1">{{$t('Link-Manager')}}</label>
								<view class="referral-link mb-1" @click="clipboard">
									<label>{{shareData['qr_url']}}</label>
									<view>
										<u--image :showLoading="true" src="../../static/images/common/copy.png"
											width="30rpx" height="30rpx" class="clipboard_btn"></u--image>
									</view>
								</view><label class="mt-1 mb-1">{{$t('Referral-code')}}</label>
								<view class="referral-link"><label>{{shareData['codes']}}</label>
									<view class="clipboard_btn" @click="clipboard">
										<u--image :showLoading="true" src="../../static/images/common/copy.png"
											width="30rpx" height="30rpx"></u--image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>


<script>
	import topWallet from "@/components/nav/top_wallet.vue"
	const copys = require("@/components/common/tui-clipboard/tui-clipboard.js")
	export default {
		components: {
			topWallet,
		},
		onLoad: function(options) {

		},
		onShow() {
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				this.init();
				this.setTitle()
			}
		},
		data() {
			return {
				money: "",
				top: 0, //标题图标距离顶部距离
				opacity: 0,
				scrollTop: 0.5,
				productList: [],
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				type: '',
				show: false,
				shareData: '',
			}
		},
		methods: {
			recharge() {

			},
			setTitle() {
				uni.setNavigationBarTitle({
					title: this.$t('Invite_friends')
				});
			},
			init() {

				let token = this.tui.getToken();
				let datas = {
					token: token,
				};
				let result = this.tui.request('/api/user/shareCode', 'post', datas, 1000, 1, '', 'shareCode');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						this.shareData = value.data;
					} else {
						this.tui.toast(value.message);
					}
				})

			},
			clipboard: function(event) {
				copys.getClipboardData(this.shareData.qr_url, (res) => {

					if (res) {
						uni.showToast({
							title: this.$t('copy-success'),
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: this.$t('copy-failed'),
							icon: 'none'
						})
					}

				}, event)
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.show = false
			}

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},


	}
</script>

<style scoped lang="scss">
	.clipboard_btn {
		margin-right: 20rpx;
		;
	}

	.recharge_btn {
		background: rgba(193, 209, 255, .2) !important;
		border-right: none;
		border-bottom: none;
		border-radius: 15px;
		box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
		color: var(--Light-Blue-Solid) !important;
		font-size: 12px;
		height: 48px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>